<template>
	<view class="page flex-col">
		<view class="group_1 flex-col">
			<view class="group_2 flex-row" style="flex-direction: column;">
				<view class="box_1 flex-col">
					<view class="box_2 flex-row" style="justify-content: space-around">
						<image class="image_1" referrerpolicy="no-referrer" src="../../static/27.png" @click="fanhui" />
						<text class="text_1">查询结果</text>
						<!-- <text style="font-size: 160rpx;color: #fff;font-weight: 700;">{{ countdown }}</text> -->
					</view>
				</view>
				<scroll-view class="footer-3" scroll-y>
					<view class="">
						<view class="box_4 flex-row justify-between" v-for="(item,index) in goods" :key="index">
							<image class="image_3" referrerpolicy="no-referrer" :src="item.picture" />
							<view class="text-wrapper_2 flex-col">
								<view class="">
									<text class="text_3">{{item.name}}</text>
									<view class="" style="display: flex;flex-direction: row; ">
										<text class="text_te">有效期:</text>
										<view class="text_5" style="display: flex;flex-direction: row; ">
											<text>{{item.specify[0]}}</text>~
											<text>{{item.specify[1]}}</text>
										</view>
									</view>
								</view>
								<view class="flex-row  justify-between">
									<text class="text4">押金:￥{{item.deposit}}元</text>
								</view>
								<view class="flex-row  justify-between">
									<text class="text_4">价格:￥{{item.selling_price}}元</text>
									<view class="detail-right">
										<text class="subtract" @click="reduce(item)">-</text>
										<text class="num">{{item.num}}</text>
										<text @click="add(item)" class="add">+</text>
									</view>
								</view>
							</view>
						</view>

					</view>
				</scroll-view>
				<view class="text-wrapper_1 flex-col flex-row justify-between">
					<view class="" style="display: flex;flex-direction: column;align-items: center;">
						<view class="text_2">合计:</view>
						<view class="text_22">￥{{totalPrice}}</view>
					</view>
						<!-- <image src="../../static/chongzhika.png" style="width: 300px;height: 130px;" mode="" @click="addcard"> -->
					</image>
					<image src="../../static/zhifu.png" style="width: 300px;height: 130px; " @click="addlist" mode="">
					</image>
				</view>
			</view>
		</view>
		<!-- 支付二维码 -->
		<view class="" 
			style="width: 100%;height: 100vh;background-color: black;opacity: 0.8;position: absolute;z-index: 998;"
			v-if="incard">
		</view>
		<view class="" style="position: absolute;top: 20px;left: 50px;z-index: 999;top: 2vh;left: 150px;z-index: 999;" v-if="incard">
			<image class="image_1"  referrerpolicy="no-referrer" src="../../static/27.png" @click="quxiaozhifu" />
		</view>
		<view v-if="incard" class=""
			style="position: absolute;top: 35vh;left: 0;z-index: 999;width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
			<view class="">
				<!-- 	<uqrcode :ref="'uqrcode'" :canvas-id="'qrcode'" size="400" :value="cardno" :options="{ margin: 10 }">
				</uqrcode> -->
				<uqrcode :ref="'uqrcode' + index" :canvas-id="'qrcode' + index" size="400" :value="cardno"
					:options="{ margin: 10 }"></uqrcode>
			</view>
			<view class="" style="display: flex; flex-direction: row;justify-content:  space-around; ">
				<!-- <view @click="quxiaozhifu" class=""
					style="width: 600rpx;height: 200rpx;background-color: #fff;font-size: 70rpx;text-align: center;line-height: 200rpx;margin-top: 200rpx;border-radius: 100rpx;margin-right: 10px;">
					返回
				</view> -->
				<view @click="getclick" class=""
					style="width: 600rpx;height: 200rpx;background-color: #fff;font-size: 70rpx;text-align: center;line-height: 200rpx;margin-top: 200rpx;border-radius: 100rpx;margin-left: 10px;">
					支付完成
				</view>
			</view>
			
		</view>
		<!-- 充值卡扫码 -->
		<view class=""
			style="width: 100%;height: 100vh;background-color: black;opacity: 0.8;position: absolute;z-index: 998;"
			v-if="cardinfo">
		</view>
		<view class="" style="position: absolute;top: 20px;left: 50px;z-index: 999;top: 2vh;left: 150px;z-index: 999;" v-if="cardinfo">
			<image class="image_1"  referrerpolicy="no-referrer" src="../../static/27.png" @click="quxiaozhifu" />
		</view>
		<view v-if="cardinfo" class=""
			style="position: absolute;top: 35vh;left: 15%;z-index: 999;width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #fff;width: 70%;height: 500px;">
			<view class="">
				<!-- 	<uqrcode :ref="'uqrcode'" :canvas-id="'qrcode'" size="400" :value="cardno" :options="{ margin: 10 }">
				</uqrcode> -->
				<input  placeholder="请先点击此处再扫码" class="your-input" v-model="password" @change="onchange" type="safe-password" auto-focus ></input>
			</view>
			<view class="" style="display: flex; flex-direction: row;justify-content:  space-around; ">
				<!-- <view @click="quxiaozhifu" class=""
					style="width: 450rpx;height: 200rpx;background-color: #dadada;font-size: 70rpx;text-align: center;line-height: 200rpx;margin-top: 200rpx;border-radius: 100rpx;margin-right: 10px;">
					返回
				</view> -->
				<view @click="qingchu" class=""
					style="width: 600rpx;height: 200rpx;background-color: #dadada;font-size: 70rpx;text-align: center;line-height: 200rpx;margin-top: 200rpx;border-radius: 100rpx;margin-right: 10px;">
					清除
				</view>
				<view  class="" @click="cardon"
					style="width: 600rpx;height: 200rpx;color: #fff;font-size: 90rpx;text-align: center;line-height: 200rpx;margin-top: 200rpx;border-radius: 100rpx;background-color: rgb(100, 108, 150);">
					确定
				</view>
			</view>
		</view>
		
		<!-- 提示窗口 -->
		<view v-if="inticket" class=""
			style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;position: absolute;z-index: 998;top: 40vh;">
			<view class=""
				style="width: 600rpx;height: 200rpx;background-color: #000000;opacity: 0.6; font-size: 70rpx;text-align: center;line-height: 200rpx;margin-top: 200rpx;color: #ffffff;">
				请选择票
			</view>
		</view>
		<view v-if="in_card" class=""
			style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;position: absolute;z-index: 998;top: 40vh;">
			<view class=""
				style="width: 600rpx;height: 200rpx;background-color: #000000;opacity: 0.6; font-size: 70rpx;text-align: center;line-height: 200rpx;margin-top: 200rpx;color: #ffffff;">
				卡不可用
			</view>
		</view>
		<view v-if="cardcg" class=""
			style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;position: absolute;z-index: 998;top: 40vh;">
			<view class=""
				style="width: 600rpx;height: 200rpx;background-color: #000000;opacity: 0.6; font-size: 70rpx;text-align: center;line-height: 200rpx;margin-top: 200rpx;color: #ffffff;">
				支付成功
			</view>
		</view>

		<!-- 打印  <button type="default" @click="getclick" style="width: 400rpx;height: 150rpx;font-size: 60rpx;">打印</button>-->
		<view class="" @click="getdayin"
			style="width: 100%;height: 200vh;background-color: black;position: absolute;z-index: 998;" v-if="indayin">
		</view>
		<div v-if="indayin" style="position: absolute;left: 0;z-index: 999;width: 100vh;display: flex;">
			<div style="margin-top: 0;border-radius: 100rpx;">
				<div class="chupia_s">
					<div class="chupia_d" v-for="(item, index) in goods_list" :key="index" style="margin-top: 100rpx;margin-bottom: 100rpx;"
						id="printMe">
						<div style="font-size: 40rpx;font-weight: 700;">
							{{venue_name}}
						</div>
						<div class="chupiao_qingwu3">
							日期：{{pay_complete}}
						</div>
						<div class="chupiao_qingwu3">
							操作员：自助机
						</div>
						<div class="" style="display: flex;flex-direction: row;margin-top: 40rpx;">
							<!-- <view class="chupiao_qingwu4" style="width: 15vw;">
								序
							</view> -->
							<div class="chupiao_qingwu4" style="width: 80vw;">
								消费项目
							</div>
							<div class="chupiao_qingwu4" style="width: 20vw;">
								单价
							</div>
							<!-- <view class="chupiao_qingwu4" style="width: 15vw;">
								数量
							</view> -->
						</div>
						<div class="" style="display: flex;flex-direction: row;">
							<!-- <view class="chupiao_qingwu4" style="width: 15vw;">
								1
							</view> -->
							<div class="chupiao_qingwu4" style="width: 80vw;">
								{{item.goods_name}}
							</div>
							<div class="chupiao_qingwu4" style="width: 20vw;">
								{{item.goods_price}}
							</div>
							<!-- <view class="chupiao_qingwu4" style="width: 15vw;">
								{{item.goods_count}}
							</view> -->
						</div>

						

						<div class="chupia_sw" style="margin-top: 40rpx;margin-left: 15rpx;margin-bottom: 20px;">
							<uqrcode :ref="'uqrcode' + index" :canvas-id="'qrcode' + index" size="100" :value="item.code_no"
								:options="{ margin: 10 }"></uqrcode>
							&nbsp;
							&nbsp;
						</div>
						<div class="" style="display: flex;flex-direction: row;margin-top: 40rpx;">
							<!-- <view class="chupiao_qingwu3">
								支付方式:元
							</view> -->
							<!-- <div class="chupiao_qingwu3" style="margin-left: 40rpx;">
								应收:{{item.amount_payable}}元
							</div> -->
							<div class="chupiao_qingwu3" style="margin-left: 40rpx;">
								实收:{{amount_payable}}元
							</div>
						</div>
						
					</div>

				</div>
			</div>
		</div>
	</view>
</template>
<script>
	import {
		machinelist,
		masub,
		mapay,
		query,
		print_info,
		machinepay
	} from '@/common/api';
	export default {
		data() {
			return {
				password:'',
				constants: {},
				countdown: 180,
				detailstyle: '',
				goods: [],
				cardno: '12132',
				incard: false,
				inticket: false,
				indayin: false,
				index: 0,
				order_id: '',
				id: '',
				goods_list:[],
				cardinfo:false,
				venue_name:'',
				pay_complete:'',
				amount_payable:'',
				filtered_Data:[],
				in_card:false,
				cardcg:false
			};
		},
		onLoad(options) {
			console.log(options)
			this.detailstyle = options.detailstyle
			this.machine()
		},
		// mounted() {
		// 	this.startCountdown();
		// },
		// onUnload() {
		// 	clearInterval(this.timer);
		// 	this.timer = null
		// },
		// // tabbar页面用onHide
		// onHide() {
		// 	clearInterval(this.timer);
		// 	this.timer = null
		// },
		computed: {
			totalNum() {
				let totalNum = 0;
				this.goods.map(item => {
					console.log(item, '1212')
					item.flag ? totalNum += item.num : totalNum += 0
				})
				console.log(totalNum, 1111)
				return totalNum
			},

			totalPrice() {
				let totalPrice = 0;
				this.goods.map(item => {
					const sellingPrice = parseFloat(item.selling_price);
					const deposit = parseFloat(item.deposit);
					item.flag ? totalPrice += item.num * (sellingPrice + deposit) : totalPrice += 0
					// item.flag ? totalPrice += item.num * item.selling_price : totalPrice += 0
				})
				console.log(totalPrice, 2222)
				return totalPrice
			}
		},
		methods: {
			//取消支付
			quxiaozhifu(){
				this.password = ''
				this.incard = false
				this.cardinfo = false
				this.machine()
			},
			//取消打印
			getdayin() {
				this.indayin = false
			},
			// async gete() {
			// 	let that = this
			// 	getAllNoByUser({
			// 			// type: this.court,
			// 			// no: this.detailstyle,
			// 			type: 1,
			// 			no: '15365504091',
			// 			output: 'json'
			// 		})
			// 		.then(res => {
			// 			console.log(res, '222')
			// 			this.listse = res
			// 			setTimeout(() => {
			// 				// window.print();
			// 				print(document.getElementById('printMe'))
			// 			}, 2000)
			// 		})
			// },
			
			//获取打印小票数据
			onprint_info() {
				let that = this
				this.incard = false
				this.indayin = true
				print_info({
						order_id: that.order_id,
						id: that.id 
					})
					.then(res => {
						console.log(res,'pp[[[]]]')
						this.goods_list = res.goods_list
						this.pay_complete = res.pay_complete
						this.amount_payable = res.amount_payable
						this.venue_name = res.venue_name
						that.machine()
						setTimeout(() => {
							// window.print();
							print(document.getElementById('printMe'))
						}, 2000)
						setTimeout(() => {
							uni.$u.route({
								url: '/pages/index/index',
								params: {}
							});
						}, 6000)
					})
				
			},
			// 获取票列表
			async machine() {
				machinelist({
					type:1
				})
					.then(res => {
						let list = res.list

						let listWithFlag = list.map(item => {
							return {
								...item,
								flag: true
							};
						});
						this.goods = listWithFlag
					})
			},
			// 提交订单
			async addlist() {
				// uni.navigateTo({
				// 	url: '/pages/code/shopping'
				// })
				let that = this
				const filteredData = this.goods.filter(item => item.num !== 0).map(({
					id,
					num
				}) => ({
					id,
					num
				}));
				console.log(filteredData);
				if (filteredData.length == 0) {
					that.inticket = true
					setTimeout(() => {
						that.inticket = false
					}, 1000)
				} else {
					masub({
							data: filteredData
						})
						.then(res => {
							that.id = res.id
							that.order_id = res.order_id
							that.addpay()
						})
						.catch(err => {

						});
				}
			},
			// 提交订单
			async addpay() {
				let that = this
				mapay({
						order_id: that.order_id,
						id: that.id 
					})
					.then(res => {
						this.cardno = res.qr_url
						this.incard = true
					})
					.catch(err => {});
			},
			//支付结果查询
			getclick() {
				let that = this
				query({
						order_id: that.order_id,
						id: that.id 
					})
					.then(res => {
						this.onprint_info()
					})
				
			},
			infukuan() {
				this.incard = false
			},
			addlistqq() {
				uni.navigateTo({
					url: '/pages/code/codea'
				})
			},
			
			addcard(){
				// 充值卡支付
				let that = this
				const filteredData = this.goods.filter(item => item.num !== 0).map(({
					id,
					num
				}) => ({
					id,
					num
				}));
				this.filtered_Data = filteredData
				console.log(filteredData);
				if (filteredData.length == 0) {
					that.inticket = true
					setTimeout(() => {
						that.inticket = false
					}, 1000)
				} else {
					this.cardinfo = true
				}
				
			},
			cardon(){
				let that = this
				masub({
						data: this.filtered_Data
					})
					.then(res => {
						console.log(res,'pppoooo')
						that.id = res.id
						that.order_id = res.order_id
						that.onmasub()
					})
					.catch(err => {
								
					});
			},
			// 充值卡支付
			onmasub(){
				let that = this
				machinepay({
						order_id: that.order_id,
						id: that.id ,
						card_no:that.password
					})
					.then(res => {
						console.log(res,'----')
						that.cardinfo = false
						that.cardcg = true
						setTimeout(() => {
							that.cardcg = false
						}, 1000)
						that.onprint_info()
						
					})
					.catch(err => {
						
					});
				
				
			},
			//清除
			qingchu(){
				console.log(99)
				let that = this
				this.password = ''
				  setTimeout(() => {
				          document.querySelector('.your-input').focus(); // 将焦点重新设置到输入框上
				      }, 500);
			},
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			// 减少
			reduce(item) {
				let num = item.num
				if (num > 1) {
					console.log(item, '999')

					num -= 1
				} else if (num = 0) {
					uni.showToast({
						title: "该宝贝不能减少了哟~"
					})
				}
				item.num = num
			},
			// 增加
			add(item) {
				console.log(item, '1212')
				let num = item.num
				item.num = num + 1
			},
			codelist(item, index) {
				console.log(item, index, 'oopp')
				// uni.navigateTo({
				// 	url: '../code/code'
				// })
			},
			fanhui() {
				uni.$u.route({
					url: '/pages/index/index',
					params: {}
				});
				// uni.navigateBack()
			},
			startCountdown() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						this.clearTimer();
						// uni.$u.route({
						// 	url: '/pages/index/index',
						// 	params: {}
						// });
						uni.navigateBack()
					}
				}, 1000);
			},
			clearTimer() {
				// this.timer = null;
				clearInterval(this.timer);
				this.timer = null
			},
		},
	};
</script>
<style lang="scss" scoped>
	/* @import './common.css'; */
	/* @import './index.rpx.css'; */
	.page {
		position: relative;
		width: 1080px;
		height: 100vh;
		overflow: hidden;
	}
	
	.your-input {
		width: 60vw;
		height: 10vw;
		font-size: 120rpx;
		color: #000;
		margin: 0 auto;
		margin-top: 1vw;
		padding-left: 50rpx;
		border-bottom: 2rpx #fff solid;
	}
	
	.uni-input-placeholder {
	    position: absolute;
	    top: auto!important;
	    left: 0;
	    color: #b5b5b5;
	    overflow: hidden;
	    text-overflow: clip;
	    white-space: pre;
	    word-break: keep-all;
	    pointer-events: none;
	    line-height: inherit;
	}

	.footer-3 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 30px;
		height: 1451px;
		width: 90vw;
		margin-left: 5vw;
	}

	/* 	.group_1 {
		height: 1920px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pspw0n03v31mgtrtq7nz5hh5pymo34wi8lc0548658-d946-4b71-9ef9-d3e20f54e0ce) 100% no-repeat;
		background-size: 100% 100%;
		width: 1080px;
	} */

	.group_2 {
		height: 100%;
		height: 100vh;
		background-image: url('../../static/26.png');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.box_1 {
		width: 1080px;
		height: 200px;
	}

	.box_2 {
		width: 100vw;
		height: 106px;
		margin: 40px 0 0 0;
	}

	.image_1 {
		width: 106px;
		height: 106px;
	}

	.text_1 {
		width: 250px;
		height: 55px;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 60px;
		font-family: zihun59hao-chuangcuhei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 60px;
		margin: 25px 0 0 45px;
	}

	.image_2 {
		width: 64px;
		height: 71px;
		margin: 17px 0 0 286px;
	}

	.text-wrapper_1 {
		// background-color: rgba(255, 255, 255, 1);
		border-radius: 30px;
		height: 149px;
		width: 90vw;
		margin-left: 5vw;
		margin-top: 5vw;
	}

	.text_2 {
		width: 200px;
		height: 46px;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1.0);
		font-size: 50px;
		font-family: zihun59hao-chuangcuhei;
		font-weight: NaN;
		white-space: nowrap;
		line-height: 50px;
		// margin: 52px 0 0 52px;
	}

	.text_22 {
		width: 200px;
		height: 46px;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1.0);
		font-size: 50px;
		font-family: zihun59hao-chuangcuhei;
		font-weight: NaN;
		white-space: nowrap;
		line-height: 50px;
		margin-top: 20px;
		// margin: 10px 0 0 52px;
	}

	.box_3 {
		/* background-color: rgba(255, 255, 255, 1);
		border-radius: 30px;
		height: 1451px;
		width: 90vw;
		margin-left: 5vw; */
		/* margin: 414px 60px 0 -1020px; */
	}

	.box_4 {
		width: 96%;
		height: 233px;
		margin: 29px 0 0 30px;
	}

	.image_3 {
		width: 232px;
		height: 232px;
		margin-top: 1px;
	}

	.text-wrapper_2 {
		width: 620px;
		height: 233px;
		// margin-left: 20px;
		margin-top: 8px;
	}

	.text_3 {
		width: 620px;
		height: 38px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 38px;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 38px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text4 {
		width: 300px;
		height: 32px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 34px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34px;
		margin: 40px 0 0 1px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text_4 {
		width: 300px;
		height: 32px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 34px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34px;
		margin: 20px 0 0 1px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.detail-right {
		font-size: 40px;
		margin: 0px 0 0 1px;

		.num {
			text-align: center;
			display: inline-block;
			width: 70px;
			line-height: 50px;
			color: #000000;
		}

		.add {
			margin-right: 20px;
			font-size: 40px;
			color: #000000;
			text-align: center;
			display: inline-block;
			width: 60px;
			height: 60px;
			line-height: 60px;
			background-color: #F3F3F3;
		}

		.subtract {
			font-size: 34px;
			color: #000000;
			text-align: center;
			display: inline-block;
			width: 60px;
			height: 60px;
			line-height: 60px;
			background-color: #F3F3F3;
		}
	}

	.text_te {
		width: 120px;
		height: 32px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 34px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34px;
		margin: 20px 0 0 1px;
	}

	.text_5 {
		width: 540px;
		height: 32px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 34px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34px;
		margin: 20px 0 0 1px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.box_5 {
		width: 910px;
		height: 235px;
		margin: 37px 0 0 30px;
	}

	.image_4 {
		width: 367px;
		height: 233px;
		margin-top: 1px;
	}

	.text-wrapper_3 {
		width: 519px;
		height: 235px;
	}

	.text_6 {
		width: 540px;
		height: 38px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 38px;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 38px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text_7 {
		width: 540px;
		height: 32px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 34px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34px;
		margin-top: 106px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text_8 {
		width: 540px;
		height: 32px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 34px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34px;
		margin-top: 27px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.chupiao1 {
		width: 100vw;
		height: 100%;
		background-color: #ffffff;
		position: absolute;
		z-index: 998;
		top: 0;
		opacity: 0.5;
	}

	.chupiao1_s {
		width: 100vw;
		height: 100%;
		background-color: #ffffff;
		position: absolute;
		z-index: 998;
		top: 0;
		opacity: 1;
	}

	.chupia_s {
		width: 100vw;
		height: auto;
		background: #eeeeee;
		// border: 1px solid;
		// background: linear-gradient(0deg, #0093C3 30%, rgba(68, 163, 252, 0.8) 100%);
		// border-image: linear-gradient(0deg, #0093C3, #6FDBFF, #0093C3) 10 10;
		position: absolute;
		z-index: 999;
		top: 0px;
		left: 0;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		// align-items: center;
		// padding: 10rpx 50rpx;
		font-size: 30rpx;

		.chupia_d {
			margin-top: 5vw;
			height: 400px;

			.chupia_sw {
				display: flex;
				flex-direction: column;
				// justify-content: center;
				// align-items: center;
			}


			.chupiao_qingwu3 {
				margin-top: 1vw;
				font-size: 4vw;
				color: #000000;
				font-size: 30rpx;
				width: 100vh;
			}

			.chupiao_qingwu4 {
				margin-top: 1vw;
				font-size: 4vw;
				color: #000000;
				font-size: 30rpx;
				width: 15vw;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: flex;
				// flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		.chupia_sw {
			display: flex;
			flex-direction: column;
			// justify-content: center;
			// align-items: center;
		}


		// .chupiao_qingwu3 {
		// 	margin-top: 1vw;
		// 	font-size: 4vw;
		// 	color: #000000;
		// 	font-size: 30rpx;
		// }
	}

	.chupiao {
		width: 552px;
		height: 450px;
		// background: #0086df;
		// border: 1px solid;
		background: linear-gradient(0deg, #0093C3 30%, rgba(68, 163, 252, 0.8) 100%);
		// border-image: linear-gradient(0deg, #0093C3, #6FDBFF, #0093C3) 10 10;
		position: absolute;
		z-index: 999;
		top: 40%;
		// left: 24%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 相对父元素水平居中 */
		align-items: center;
		/*  子元素相对父元素垂直居中 */

		.chupiao_qingwu {
			font-size: 5vw;
			color: #FF0000;
		}

		.chupiao_qingwu1 {
			font-size: 4vw;
			color: #FEFEFE;
			margin-top: 1vw;
		}

		.chupiao_qingwu2 {
			font-size: 3vw;
			color: #FFFFFF;
			margin-top: 1vw;
		}

		// .chupiao_qingwu3 {
		// 	margin-top: 1vw;
		// 	font-size: 4vw;
		// 	color: #FFFFFF;
		// }

		.chupiao_jindu {
			width: 70%;
			height: 4vw;
			margin-top: 2vw;
		}
	}
</style>